<template>
  <text :class="customClass">
    <text
      v-for="item in textArr"
      :style="{ color: this.activeText === item ? this.color : '' }"
      :key="item"
      >{{ item }}</text
    >
  </text>
</template>

<script>
export default {
  name: 'k-highlight-text',
  props: {
    customClass: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: '#4AC1FE'
    },
    text: {
      type: String
    },
    activeText: {
      type: String,
      default: ''
    }
  },
  computed: {
    textArr() {
      if (this.activeText) {
        const re = new RegExp(this.activeText)
        let res = this.text.replace(re, `$${this.activeText}$`)
        res = res.split('$')
        return res
      }
      return [this.text]
    }
  }
}
</script>

<style scoped lang="scss"></style>
